import React, {Component} from 'react';
import {Link, Route, Switch} from "react-router-dom";
import Detail from "./Detail";
import MyNavLink from "../../../components/MyNavLink";

class Message extends Component {
  state = {
    messages: [
      {id: '1001', title: 'message001'},
      {id: '2002', title: 'message002'},
      {id: '3003', title: 'message003'},
    ]
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.messages.map(message => {
            return (
              <li key={message.id}>
                {/*<Link to={`/home/message/detail/${message.id}/${message.title}`}>*/}
                {/*  {message.title}*/}
                {/*</Link>*/}
                {/*<Link to={`/home/message/detail?id=${message.id}&title=${message.title}`}>{message.title}</Link>*/}

                <Link to={{
                  pathname: '/home/message/detail',
                  state: {...message}
                }}>{message.title}</Link>
              </li>
            )
          })}
        </ul>
        <hr/>
        {/*path参数*/}
        <Switch>
          {/*<Route path={`/home/message/detail/:id/:title`} component={Detail}/>*/}

          {/*query参数*/}
          {/*<Route path="/home/message/detail" component={Detail}/>*/}
          {/*state参数*/}
          <Route path="/home/message/detail" component={Detail}/>
        </Switch>
      </div>
    );
  }
}

export default Message;